<template>
  <div class="nucleic-protocol">
    <div class="nucleic-protocol-item">
      <fieldset>
        <legend>变损电量:</legend>
        <div class="nucleic-protocol-item1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="有功铜损率">
              <el-input v-model="form.activeCopperLossRate" />
            </el-form-item>
            <el-form-item label="无功铜损率">
              <el-input v-model="form.reactiveCopperLossRate" />
            </el-form-item>
            <el-form-item label="每小时有功铁损">
              <el-input v-model="form.activeIronLossHour" />
            </el-form-item>
            <el-form-item label="每小时无功铁损">
              <el-input v-model="form.reactiveIronLossHour" />
            </el-form-item>
            <el-form-item label="本月天数">
              <el-input v-model="form.days" />
            </el-form-item>
            <el-form-item label="有功铁损">
              <el-input v-model="form.activeIRonLoss" />
            </el-form-item>
            <el-form-item label="无功铜损">
              <el-input v-model="form.reactiveCopperLoss" />
            </el-form-item>
            <el-form-item label="无功铁损">
              <el-input v-model="form.reactiveIRonLoss" />
            </el-form-item>
          </el-form>
        </div>
      </fieldset>
      <fieldset>
        <legend>力调系数:</legend>
        <div class="nucleic-protocol-item1 ltxs">
          <el-form :model="form" label-width="120px">
            <el-form-item label="实际力率">
              <el-input v-model="form.actualRate" />
            </el-form-item>
            <el-form-item label="力调系数">
              <el-input v-model="form.ltxs" />
            </el-form-item>
          </el-form>
        </div>
      </fieldset>
    </div>
    <div class="nucleic-protocol-item">
      <fieldset>
        <legend>计费电量合计(千瓦<sub>.</sub>时):</legend>
        <div class="nucleic-protocol-item1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="有功总">
              <el-input v-model="form.ygz" />
            </el-form-item>
            <el-form-item label="尖时段">
              <el-input v-model="form.jsd" />
            </el-form-item>
            <el-form-item label="峰时段">
              <el-input v-model="form.fsd" />
            </el-form-item>
            <el-form-item label="平时段">
              <el-input v-model="form.psd" />
            </el-form-item>
            <el-form-item label="谷时段">
              <el-input v-model="form.gsd" />
            </el-form-item>
            <el-form-item label="无功总">
              <el-input v-model="form.wgz" />
            </el-form-item>
          </el-form>
        </div>
      </fieldset>
      <fieldset>
        <legend>核算电费(元):</legend>
        <div class="nucleic-protocol-item1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="尖时段电费">
              <el-input v-model="form.jsddf" />
            </el-form-item>
            <el-form-item label="峰时段电费">
              <el-input v-model="form.fsddf" />
            </el-form-item>
            <el-form-item label="平时段电费">
              <el-input v-model="form.psddf" />
            </el-form-item>
            <el-form-item label="谷时段电费">
              <el-input v-model="form.gsddf" />
            </el-form-item>
            <el-form-item label="总电费">
              <el-input v-model="form.zdf" />
            </el-form-item>
          </el-form>
        </div>
      </fieldset>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import { useAppStore } from "@/stores";
import { storeToRefs } from "pinia";
const useApp = useAppStore();
let { lossParameters, calculationData } = storeToRefs(useApp);
const form = reactive({
  eleType: "",
  transformer: "",
  kva: "",
  voltageLevel: "",
  powerFactor: "",
  accountingPlan: "",
});
const props = defineProps({
  position: String,
});

onMounted(() => {
  //数据监听
  watch(
    lossParameters.value,
    (newValue, oldValue) => {
      if (newValue[props.position] && newValue[props.position] != undefined) {
        if (
          newValue[props.position].capacity &&
          newValue[props.position].capacity != undefined
        ) {
          form.capacity = newValue[props.position].capacity;
        }
        if (
          newValue[props.position].activeCopperLossRate &&
          newValue[props.position].activeCopperLossRate != undefined
        ) {
          form.activeCopperLossRate =
            newValue[props.position].activeCopperLossRate;
        }

        if (
          newValue[props.position].activeIronLossHour &&
          newValue[props.position].activeIronLossHour != undefined
        ) {
          form.activeIronLossHour = newValue[props.position].activeIronLossHour;
        }

        if (
          newValue[props.position].reactiveIronLossHour &&
          newValue[props.position].reactiveIronLossHour != undefined
        ) {
          form.reactiveIronLossHour =
            newValue[props.position].reactiveIronLossHour;
        }

        if (
          newValue[props.position].reactiveCopperLossRate &&
          newValue[props.position].reactiveCopperLossRate != undefined
        ) {
          form.reactiveCopperLossRate =
            newValue[props.position].reactiveCopperLossRate;
        }
      }
    },
    { immediate: true },
    { deep: true }
  );
  // 计算数据
  watch(
    calculationData.value,
    (newValue, oldValue) => {
      if (newValue[props.position] && newValue[props.position] != undefined) {
        if (
          newValue[props.position].activeIRonLoss &&
          newValue[props.position].activeIRonLoss != undefined
        ) {
          form.activeIRonLoss = newValue[props.position].activeIRonLoss;
        }
        if (
          newValue[props.position].reactiveCopperLoss &&
          newValue[props.position].reactiveCopperLoss != undefined
        ) {
          form.reactiveCopperLoss = newValue[props.position].reactiveCopperLoss;
        }
        if (
          newValue[props.position].reactiveIRonLoss &&
          newValue[props.position].reactiveIRonLoss != undefined
        ) {
          form.reactiveIRonLoss = newValue[props.position].reactiveIRonLoss;
        }
        if (
          newValue[props.position].actualRate &&
          newValue[props.position].actualRate != undefined
        ) {
          form.actualRate = newValue[props.position].actualRate;
        }
        if (
          newValue[props.position].ltxs &&
          newValue[props.position].ltxs != undefined
        ) {
          form.ltxs = newValue[props.position].ltxs;
        }
        if (
          newValue[props.position].ygz &&
          newValue[props.position].ygz != undefined
        ) {
          form.ygz = newValue[props.position].ygz;
        }
        if (
          newValue[props.position].jsd &&
          newValue[props.position].jsd != undefined
        ) {
          form.jsd = newValue[props.position].jsd;
        }
        if (
          newValue[props.position].fsd &&
          newValue[props.position].fsd != undefined
        ) {
          form.fsd = newValue[props.position].fsd;
        }
        if (
          newValue[props.position].psd &&
          newValue[props.position].psd != undefined
        ) {
          form.psd = newValue[props.position].psd;
        }
        if (
          newValue[props.position].gsd &&
          newValue[props.position].gsd != undefined
        ) {
          form.gsd = newValue[props.position].gsd;
        }
        if (
          newValue[props.position].wgz &&
          newValue[props.position].wgz != undefined
        ) {
          form.wgz = newValue[props.position].wgz;
        }
        if (
          newValue[props.position].jsddf &&
          newValue[props.position].jsddf != undefined
        ) {
          form.jsddf = newValue[props.position].jsddf;
        }
        if (
          newValue[props.position].fsddf &&
          newValue[props.position].fsddf != undefined
        ) {
          form.fsddf = newValue[props.position].fsddf;
        }
        if (
          newValue[props.position].psddf &&
          newValue[props.position].psddf != undefined
        ) {
          form.psddf = newValue[props.position].psddf;
        }
        if (
          newValue[props.position].gsddf &&
          newValue[props.position].gsddf != undefined
        ) {
          form.gsddf = newValue[props.position].gsddf;
        }
        if (
          newValue[props.position].zdf &&
          newValue[props.position].zdf != undefined
        ) {
          form.zdf = newValue[props.position].zdf;
        }
      }
    },
    { immediate: true },
    { deep: true }
  );
  getDaysInMonth(); //计算天数
});
//计算天数
const getDaysInMonth = () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth(); // 从0开始的月份索引

  // 根据年份和月份创建一个日期对象
  const lastDayOfMonth = new Date(year, month + 1, 0);

  // 获取当月的天数
  form.days = lastDayOfMonth.getDate();
};
</script>

<style lang="scss" scoped>
.nucleic-protocol {
  display: flex;
  // height: 200px;
  overflow: auto;
  .nucleic-protocol-item {
    margin: 0px 10px;
    width: 50%;
    .nucleic-protocol-item1 {
      padding: 0px 10px;
      .el-form-item {
        margin-bottom: 0px;
      }
    }
    .ltxs {
      .el-form-item {
        margin-bottom: 15px;
      }
    }
  }
}
</style>
